import React, {useState, useEffect, forwardRef, useImperativeHandle} from 'react'
import { Form, Input, Select, DatePicker } from 'antd'
import http from '@utils/http'
import { RmbIcon, PercentIcon, DateIcon } from '@components/icon/system'
import dayjs from 'dayjs'
import '../styles/rollForm.less'

const { TextArea } = Input

const rules = {
  amount: [
    {
      required: true,
      message: '请输入已用额度'
    },
    {
      validator: (_, value) => {
        if (value === 0 || value === '0') {
          return Promise.reject(new Error('输入额度必须大于0'));
        }
        return Promise.resolve();
      },
    }
  ],
  rollIn: [
    {
      required: true,
      message: '请选择转出账户'
    }
  ],
  rollOut: [
    {
      required: true,
      message: '请选择转入账户'
    }
  ],
  date: [
    {
      required: true,
      message: '请选择日期'
    }
  ]
}

const rollInForm = forwardRef((props, ref) => {
  const [showNotes, setShowNotes] = useState(false)
  const [accountList, setAccountList] = useState([])

  const [form] = Form.useForm();

  useEffect(() => {
    getAccountList()
  }, [])

  useImperativeHandle(ref, () => ({
    form: form
  }))

  const getAccountList = () => {
    http.get('accountList', {}).then(res => {
      if (res.code !== 200) return false
      setAccountList(res.data)
    })
  }

  const handleSubmit = (values) => {

  }

  const handleChange = (value) => {

  }

  const inOptions = accountList.map(item => ({
    value: item.id,
    label: (
      <>
        <p className="account-name">{item.name}</p>
        <p className="account-balance" style={{color: '#999', fontSize: '12px', fontFamily: 'amount-family'}}>{item.amount}</p>
      </>
    ),
    name: item.name
  }))

  const outOptions =  accountList.map(item => ({
    value: item.id,
    label: (
      <>
        <p className="account-name">{item.name}</p>
        <p className="account-balance" style={{color: '#999', fontSize: '12px', fontFamily: 'amount-family'}}>{item.amount}</p>
      </>
    ),
    name: item.name
  }))

  if (props.type === 'in') {
    outOptions.unshift({
      value: 0,
      label: '外部账户',
      name: '外部账户'
    })
  } else {
    inOptions.unshift({
      value: 0,
      label: '外部账户',
      name: '外部账户'
    })
  }

  return (
    <div className="roll-in-form roll-form">
      <Form
        name="credit-form"
        form={props.form || form}
        labelCol={{ span: 24 }}
        wrapperCol={{ span: 24 }}
        colon={false}
        onFinish={handleSubmit}
        initialValues={{
          ...(props.type === 'in'
            ? { rollOut: 0 }
            : { rollIn: 0 }),
          date: dayjs(Date.now())
        }}
      >
        <Form.Item label="金额(元)" name="amount" rules={rules.amount}>
          <Input placeholder="0" prefix={<RmbIcon width={14} height={14} fill="#999" />} />
        </Form.Item>
        <div className="form-double-column">
          <Form.Item label="转出账户" name="rollOut" rules={rules.rollOut}>
            <Select
              style={{ width: '100%' }}
              placeholder="选择账户"
              onChange={handleChange}
              options={outOptions}
              optionLabelProp="name"
            />
          </Form.Item>
          <Form.Item label="转入账户" name="rollIn" rules={rules.rollIn}>
            <Select
              style={{ width: '100%' }}
              placeholder="选择账户"
              onChange={handleChange}
              options={inOptions}
              optionLabelProp="name"
            />
          </Form.Item>
        </div>
        <Form.Item label="日期" name="date" rules={rules.date}>
          <DatePicker
            style={{width: '100%'}}
            format="YYYY-MM-DD"
            placeholder="选择日期"
            onChange={(value, dateString) => {
              console.log('Selected Time: ', value);
              console.log('Formatted Selected Time: ', dateString);
            }}
          />
        </Form.Item>
        <Form.Item label={(
          <div className="double-label">
            <span>备注</span>
            {
              !showNotes && <span className="add-notes-btn" onClick={() => setShowNotes(true)}>添加</span>
            }
          </div>
        )} name="notes">
          <TextArea
            rows={3}
            placeholder="请输入备注内容"
            style={{ display: showNotes ? 'block' : 'none' }}
          />
        </Form.Item>
      </Form>
    </div>
  )
})

export default rollInForm;